<template>
    <div class="header">
        <div class="position">
            <i class="iconfont icon">&#xe8ae;</i>
            <a href="#">江苏</a>
        </div>
        <div class="nav">
            <ul>
                <li  v-for="item in navList" :key="item.id"><a href="">{{item.navName}}</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data: function () {
    return {
      navList: [
        {id: 1, navName: '我的订单'},
        {id: 2, navName: '我的京东'},
        {id: 3, navName: '京东会员'},
        {id: 4, navName: '手机京东'},
        {id: 5, navName: '网站导航'}
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.header
  height 2em
  display flex
  align-items center
  justify-content space-between
  padding 0 12em
  background-color #E3E4E5
  font-size .9em
  .position a
    display inline-block
    color #A8A8A8
  .position:hover
    background-color #fff
  .position .icon
    color red
  .nav ul
    display flex
    align-items center
  .nav a
    padding 0 1.5em
    color #A8A8A8
  .nav li:after
    content '|'
    color #A8A8A8
  .nav li:last-child:after
    content ' '
  .nav li a:hover
    color red
</style>
